<template>
	<view class="container">
		<scroll-view class="left" scroll-y>
			<view :class="active===index?'active':''" @click="leftClickHandle(index, item.categoryId)"
				v-for="(item, index) in categoriesLeft" :key="item.categoryId">
				{{item.categoryName}}
			</view>
		</scroll-view>
		<scroll-view class="right" scroll-y enable-flex>
			<view 
				v-if="categoriesRight.length > 0"
				class="item" 
				v-for="(item, index) in categoriesRight" 
				:key="index" 
				@click="click(index)"
			>
				<image mode="aspectFill" :src="item.categoryPic"></image>
				<text>{{item.categoryName}}</text>
			</view>

			<u-empty v-if="categoriesRight.length == 0" text="暂无数据" mode="list"></u-empty>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getCategoryLeft,
		getCategoryRight
	} from "@/api/category.js";
	export default {
		data() {
			return {
				active: 0,
				categoriesLeft: [],
				categoriesRight: []
			}
		},
		methods: {
			async getCategoriesLeft() {
				await getCategoryLeft().then(res => {
					this.categoriesLeft = res.data
				})
				this.leftClickHandle(0, this.categoriesLeft[0].categoryId)
			},
			async leftClickHandle(index, categoryId) {
				this.active = index
				// 获取右侧的数据
				await getCategoryRight(categoryId).then(res => {
					this.categoriesRight = res.data
				})
			},
			click(index) {
				this.$u.route('/pages/goods/goods', {
					categoryList: JSON.stringify(this.categoriesRight),
					index: index
				});
			}
		},
		onShow() {
			this.getCategoriesLeft()
		}
	}
</script>
<style lang="scss">
	@import "./category.scss";
</style>
